<template>
  <el-date-picker 
                  align="right"
                  :type="query?query.type:'monthrange'"
                  unlink-panels
                  style="width: 226px"
                  range-separator="-"
                  :start-placeholder="query?'开始日期':'开始月份'"
                  :end-placeholder="query?'结束日期':'结束月份'"
                  :value="value"
                  :picker-options="pickerOptions"
                  @input="handleInput">
  </el-date-picker>
</template>

<script>
export default {
  name: "MonthRangeSelect",
  props: {
    value: {
      type: Array
    },
    options: {
      type: [Object, Array],
      default () {
        return { range: "date" };
      }
    },
    label: {
      type: String,
      delete: null
    },
    query: {
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {
      time:'',
      pickDate: '',
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate
      }
    };
  },
  computed: {
    range () {
      return this.options?.range || "date";
    },
    normalizedType () {
      return this.range + "range";
    },
    placeholderName () {
      return RANGE_NAMES[this.range];
    }
  },
  methods: {
    initialData (value) {
      let time
      let now = new Date();
      let currentYear = now.getFullYear()
      let currentMonth = now.getMonth() + 1;
      let currentTime = String(currentYear) + (currentMonth<10?'0' + 
      String(currentMonth):String(currentMonth));
      return value = currentTime
    },
    //限制筛选时效一年
    getPickDate (pick) {
      this.pickDate = pick;
    },
    disabledDate (date) {
      const { minDate, maxDate } = this.pickDate;
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf());
        if (diff > 1000 * 3600 * 24 * 365) {
          return true;
        }
      }
    },
    reset () {
      
    },
    handleInput (e) {
      console.log(this.query)
      this.$emit("input", e);
    }
  }
};
</script>

<style scoped></style>
